<template>
  <Dialog :appDialog="appDialog" ref="DialogRef">
    <div class="dialog-item"
      >审核设置：
      <el-switch v-model="audit" />
    </div>
    <div class="dialog-item" v-show="audit"
      >审核员工：
      <el-button @click="opendept">选择成员</el-button>
      <div class="staffs">
        <el-tag v-for="(item, index) in creators" :key="index" closable class="staffs_item" @close="handleClose(item)">{{ item.name }}</el-tag>
      </div>
    </div>
  </Dialog>
  <ZWDepart ref="DepartRef" :type="1" @submit="getDepart" />
</template>
<script lang="ts" setup>
  import { ref, reactive, computed } from 'vue'
  import Dialog from '@/components/Dialog.vue'
  import ZWDepart from '@/components/ZWDepart.vue'
  import { getSetionId, IsNotEmpty } from '@/utils/utils'
  import { auditSet, auditView } from '@/api/employe/employeetasks/taskmanage'
  import { ElMessage } from 'element-plus'
  const audit = ref(true)
  const DepartRef = ref(null)
  const creators = ref([])
  const formData = reactive({
    task_audit_switch: 1,
    task_audit_work_user_list: []
  })
  //获取员工设置
  const getauditView = () => {
    auditView().then((res: any) => {
      res.task_audit_switch == 1 ? (audit.value = true) : (audit.value = false)
      if (IsNotEmpty(res.task_audit_work_user_list)) {
        res.task_audit_work_user_list.map((item: any) => {
          item.type = 'user'
        })
        creators.value = res.task_audit_work_user_list
        formData.task_audit_work_user_list = getSetionId('id', creators.value)
      }
    })
  }
  //取消
  const cancelHandel = () => {
    appDialog.value.visible = false
  }
  //保存
  const submitHandel = () => {
    audit.value ? (formData.task_audit_switch = 1) : (formData.task_audit_switch = 2)
    auditSet(formData).then((res: any) => {
      ElMessage.success('设置成功')
      appDialog.value.visible = false
    })
  }
  const handleClose = (tag: string) => {
    creators.value.splice(creators.value.indexOf(tag), 1)
    formData.task_audit_work_user_list = formData.task_audit_work_user_list.filter((item: any) => {
      return item != tag.id
    })
  }
  const appDialog: any = ref({
    visible: false,
    title: '审核设置',
    width: '564px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    editData: {} //当前编辑的数据
  })
  //打开员工弹窗
  const opendept = () => {
    DepartRef.value.selectedMember = creators.value
    DepartRef.value.departVisble = true
    DepartRef.value.title = '选择成员'
  }
  const getDepart = (res: any) => {
    creators.value = res
    formData.task_audit_work_user_list = getSetionId('id', creators.value)
    DepartRef.value.departVisble = false
  }
  defineExpose({
    appDialog,
    getauditView
  })
</script>
<style lang="scss" scoped>
  .dialog-item {
    line-height: 60px;
  }
  .tag-detail {
    margin-right: 10px;
  }
  .staffs {
    &_item {
      height: 22px;
      line-height: 22px;
      margin-right: 6px;
      // padding: 0;
      color: #35383a;
      border: 1px solid #fffaf9;
      border-radius: 1px 1px 1px 1px;
      background: #fffaf9;
    }

    :deep .el-tag .el-icon {
      width: 12px;
      height: 12px;
      color: #ffffff !important;
      background: #d9d9d9;
    }

    :deep .el-tag .el-icon svg {
      margin: 0px;
    }

    :deep .el-tag .el-tag__close:hover {
      background: #d9d9d9;
    }

    :deep span.el-tag.el-tag--light.staffs_item:before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 11px;
      background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
      margin-right: 10px;
    }
  }
</style>
